<script setup lang="ts">
import { ref } from 'vue'
import LoginForm from '@/components/form/LoginForm.vue'
import RegisterForm from '@/components/form/RegisterForm.vue'
// import ForgetForm from '../components/ForgetForm.vue'

const formType = ref('login')

const bindLeftWidth = ref('642px')

const handleChange = (val: string) => {
  formType.value = val
}

const goEquipmentFiling = () => {
  window.open('https://beian.miit.gov.cn/')
}
</script>

<template>
  <div class="login-wrapper">
    <div class="center-container">
      <div class="left-container">
        <div class="title-container">
          <img src="/images/logo-3.png" alt="" class="logo" />
        </div>
      </div>
      <div class="right-container">
        <LoginForm v-if="formType === 'login'" @change="handleChange"></LoginForm>
        <RegisterForm v-if="formType === 'register'" @change="handleChange"></RegisterForm>
        <!-- <ForgetForm v-if="formType === 'forget'" @change="handleChange"></ForgetForm> -->
      </div>
    </div>
    <div class="equipment-filing" @click="goEquipmentFiling">滇ICP备168168168号-6</div>
  </div>
</template>

<style lang="scss" scoped>
.login-wrapper {
  width: 100%;
  height: 100%;
  background-image: url('/images/bg.png');
  background-size: 100% 100%;
  position: relative;
  .center-container {
    width: 1280px;
    height: 750px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    box-shadow: 0px 2px 22px 0px var(--el-color-primary-light-8);
    border-radius: 2px;
    .left-container {
      width: v-bind(bindLeftWidth);
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      background-image: url('/images/left-bg.png');
      background-size: 100% 100%;
      transition: all 0.5s;
      border-radius: 10px;
      position: relative;
      .title-container {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-65%) translateY(-70%);
        .title {
          font-family: 'PingFangSC-Bold';
          font-size: 40px;
          color: rgba(255, 255, 255, 1);
          pointer-events: none;
        }
        .title-tip {
          font-family: 'PingFangSC-Regular';
          font-size: 16px;
          color: rgba(255, 255, 255, 0.7);
          margin-top: 10px;
          margin-left: 4px;
          pointer-events: none;
        }

        .logo {
          width: 396px;
          height: 77px;
        }
      }
    }
    .right-container {
      width: 750px;
      height: 800px;
      display: flex;
      justify-content: center;
      align-items: center;
      transition: all 0.5s;
      position: absolute;
      top: 50%;
      right: 0;
      bottom: 0;
      z-index: 999;
      transform: translateY(-50%);
      border: 1px solid #fff;
      border-radius: 10px;
      background-color: rgba(255, 255, 255, 0.4);
      backdrop-filter: blur(10px);
    }

    :deep(.el-input__wrapper) {
      background: none !important;
      input:-webkit-autofill {
        box-shadow: 0 0 0px 1000px transparent inset !important;
        background-color: transparent;
        background-image: none;
        transition: background-color 50000s ease-in-out 0s;
      }
    }
  }
  .equipment-filing {
    font-family: 'PingFangSC-Bold';
    font-size: 16px;
    font-weight: bold;
    color: #a8aab2;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 20px;
    cursor: pointer;
  }
}
</style>
